import React, { Fragment, useState } from 'react';

const App = ({ a, b }) => {
  // console.log(props) // {a: '1', b: '2'}
  console.log(a, b) // 1 2
  let [info, setInfo] = useState({ age: 1 })
  // let info = { age: 1 }  // 普通的对象，是不会实现响应式渲染的！！
  let [count, setCount] = useState(0)
  const incrementCount = (payload, event) => {
    setCount(count + payload)
    setInfo({ ...info, age: info.age + payload })
    // info.age = info.age + 1;
    console.log(event)
  }
  return (
    <Fragment>
      <h1>age: {info.age}</h1>
      <h1>count: {count}</h1>
      <div>
        {/* <button type='button' onClick={incrementCount}>+1</button> */}
        <button type='button' onClick={(event) => {
          incrementCount(5, event)
        }}>+payload</button>
      </div>
    </Fragment>
  );
}

export default App;

